<template>
	<view class="box">
		<view class="top">
			<u-navbar height="50" back-icon-color="#333" title="我要入驻" title-color="#333" title-size="36">
			</u-navbar>
		</view>
		<view class="banner">
			<u-image width="100%" height="300rpx" src="https://app.jhsppf.cn/jhsp/settle.png"></u-image>
		</view>
		<view class="stepBox container_br">
			<view class="title">
				入驻流程
			</view>
			<view class="step flc">
				<view class="item">
					<view class="icon">
						<u-icon :name="'/static/ucenter/tjzl.png'" size="90"></u-icon>
					</view>
					<view class="tips">
						<view class="name">
							提交申请
						</view>
						<view class="tip">
							真实信息
						</view>
					</view>
				</view>
				<view class="line">
					
				</view>
				<view class="item">
					<view class="icon">
						<u-icon :name="'/static/ucenter/ptsh.png'" size="90"></u-icon>
					</view>
					<view class="tips">
						<view class="name">
							平台审核
						</view>
						<view class="tip">
							1-3工作日
						</view>
					</view>
				</view>
				<view class="line">
					
				</view>
				<view class="item">
					<view class="icon">
						<u-icon :name="'/static/ucenter/kdcg.png'" size="90"></u-icon>
					</view>
					<view class="tips">
						<view class="name">
							审核通过
						</view>
						<view class="tip">
							入驻通过
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="materials container_br">
			<view class="title">
				开店需准备以下资料
			</view>
			<view class="example flc">
				<view class="left">
					<u-image width="240rpx" height="160rpx" src="/static/ucenter/yyzz.png"></u-image>
				</view>
				<view class="right ml2">
					<view class="steps">
						1、营业执照
					</view>
					<view class="info">
						需提供完整的营业执照照片
					</view>
				</view>
			</view>
			<view class="example flc">
				<view class="left">
					<u-image width="240rpx" height="160rpx" src="/static/ucenter/sfz.png"></u-image>
				</view>
				<view class="right ml2">
					<view class="steps">
						2、法人身份证正反面
					</view>
					<view class="info">
						需提供法人有效身份证正反面；拍摄时
						确保身份证边框完整，，字体清晰。
					</view>
				</view>
			</view>
			
		</view>
		<view class="btns">
			<view class="aggrement flc" >
				<u-icon v-if="!agree" :name="'/static/icons/unselect.png'" size="32" @click="agree = true"></u-icon>
				<u-icon v-else :name="'/static/icons/xz.png'" size="32" @click="agree = false"></u-icon>
				<span class="ml2">我已阅读并同意</span>
				<span class="cxc" @click="goWebData">《商家入驻协议》</span>
			</view>
			<view class="btn" @click="goSettle">
				资料已准备好了，立即入驻
			</view>
		</view>
	</view>
</template>

<script>
import { toast } from '../../utils/common';
	export default {
		data() {
			return {
				agree:false
			};
		},
		methods:{
			goWebData(){
				uni.navigateTo({
					url:'/other/webData/webData?type=1'
				})
			},
			goSettle(){
				if(!this.agree){
					toast("请阅读并勾选商家入驻协议")
					return
				}
				uni.navigateTo({
					url:'/other/settle/settle'
				})
			}
		}
	}
</script>

<style lang="scss">
	.banner{
		width: 710rpx;
		margin: 20rpx auto;
		border-radius: 20rpx;
	}
	.stepBox{
		.title{
			font-size: 30rpx;
			color: #333333;
		}
		.step{
			width: 610rpx;
			margin: 20rpx auto;
			.icon{
				width: 120rpx;
				height: 120rpx;
				box-sizing: border-box;
				padding: 15rpx;
			}
			.item{
				display: flex;
				flex-direction: column;
				align-items: center;
			}
			.line{
				height: 2rpx;
				border: 2px solid #F5E0D7;
				width: 200rpx;
				margin-top: -50rpx;
			}
			.tips .name{
				width: 90rpx;
				color: #333333;
				font-size: 20rpx;
				text-align: center;
			}
			.tips .tip{
				width: 90rpx;
				font-size: 16rpx;
				color: #999;
				text-align: center;
			}
		}
	}
	
	.materials{
		.title{
			font-size: 30rpx;
			color: #333333;
		}
		.example{
			margin-top: 40rpx;
			.left{
				width: 240rpx;
				height: 160rpx;
			}
			.right{
				width: 400rpx;
				height: 160rpx;
			}
			.right .steps{
				font-size: 28rpx;
				color: #333;
			}
			.right .info{
				font-size: 24rpx;
				color: #999;
				line-height: 48rpx;
			}
		}
	}
	.btns{
		position: fixed;
		width: 750rpx;
		bottom: 0;
		height: 180rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -3rpx 10rpx 0rpx rgba(153,153,153,0.1);
		box-sizing: border-box;
		padding: 20rpx;
		.btn{
			margin-top: 20rpx;
			width: 710rpx;
			height: 70rpx;
			background: linear-gradient(90deg, #FD4120, #F47749);
			border-radius: 30rpx;
			font-weight: 400;
			font-size: 28rpx;
			color: #FFFFFF;
			line-height: 70rpx;
		}
	}

</style>